<template>
  <div class="app-container home" v-loading="loading">
    <el-row :gutter="20" style="margin-top:24px;padding-left: 10px;">
      <el-col :xs="24" :sm="24" :md="24" :lg="12">
        快速通道
        <!-- v-hasRole="['shangjia']"
        v-hasRole="['admin']" -->
        <el-row :gutter="20" style="margin-top:10px;">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" style="display: flex;">
            <el-card class="update-log kuaisu" v-for="(item, index) in kusisu_list" :key="index"
              v-if="item.state == 0 || item.zhuangtai == quanxian" :style="'background-image: url(' + item.image + ')'"
              @click.native="japClick(item.url)">
              {{ item.name }}
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12">
        <span>数据统计</span>
        <el-dropdown @command="handleCommand_one" class="dropdown">
          <span class="el-dropdown-link">
            {{ shaixuan[type_one].name }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in shaixuan" :index="index" :command="index">{{ item.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-row :gutter="20" style="margin-top:10px;">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" style="display: flex;">
            <el-card class="update-log tongji" v-for="(item, index) in tongji_list" :key="index"
              v-if="item.state == 0 || item.zhuangtai == quanxian">
              <div style="border-left:2px solid #FF1F4F;text-indent:4px;line-height:18px">{{ item.name }}</div>
              <div style="font-size:16px;margin-top:10px">{{ item.zhi || 0 }}
                <span v-if="index == 3">单</span>
                <span v-else-if="index == 4">￥</span>
                <span v-else-if="index == 5">￥</span>
                <span v-else>人</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:24px">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-card class="update-log">
          <el-row :gutter="20" style="margin-left:24px;margin-top:16px">
            <span class="title_index" v-if="quanxian == false">客资来源占比（总计）</span>
            <span class="title_index" v-else>平台转化率（总计）</span>
            <el-dropdown @command="handleCommand_two" class="dropdown">
              <span class="el-dropdown-link">
                {{ shaixuan[type_two].name }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in shaixuan" :index="index" :command="index">{{ item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-row>
          <div id="bing"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-card class="update-log">
          <el-row :gutter="20" style="margin-left:24px;margin-top:16px">
            <span class="title_index">收益统计</span>
            <el-dropdown @command="handleCommand_three" class="dropdown">
              <span class="el-dropdown-link">
                {{ shaixuan[type_three].name }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in shaixuan" :index="index" :command="index">{{ item.name}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-row>
          <div id="echart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { checkPermi,checkRole } from "@/utils/permission.js";
import { getInfo } from '@/api/login'
import { shujutongji, kezi, shouyi } from "@/api/index.js";
export default {
  data() {
    return {
      quanxian: false, //false 不是管理员   true  是管理员
      query:{
        shopid:'257',
        shopType:'婚纱摄影',
      },
      kusisu_list: [{
        name: '员工管理',
        url: '/puser/userlist',
        zhuangtai: false,
        state: 1,
        image: require('@/assets/index/1.png')
      }, {
        name: '店铺员工',
        url: '/business/shopUser',
        zhuangtai: true,
        state: 1,
        image: require('@/assets/index/1.png')
      }, {
        name: '客资管理',
        url: '/kuser/allkz',
        zhuangtai: false,
        state: 0,
        image: require('@/assets/index/2.png')
      }, {
        name: '店铺管理',
        url: '/business/zhuangxiu',
        zhuangtai: true,
        state: 1,
        image: require('@/assets/index/3.png')
      }, {
        name: '商家管理',
        url: '/business/userlist',
        zhuangtai: false,
        state: 1,
        image: require('@/assets/index/3.png')
      }, {
        name: '财务管理',
        url: '/puser/jiaoyimingxi',
        zhuangtai: false,
        state: 1,
        image: require('@/assets/index/4.png')
      }, {
        name: '财务管理',
        url: '/business/finace/recharge',
        zhuangtai: true,
        state: 1,
        image: require('@/assets/index/4.png')
      }],
      tongji_list: [{
        name: '累计推送客资',
        zhi: '',
        zhuangtai: true,
        state: 1,
      }, {
        name: '客资数量',
        zhi: '',
        zhuangtai: false,
        state: 1
      }, {
        name: '订单成交数',
        zhi: '',
        zhuangtai: false,
        state: 0
      }, {
        name: '退回客资数量',
        zhi: '',
        zhuangtai: false,
        state: 0
      }, {
        name: '订单收益',
        zhi: '',
        zhuangtai: false,
        state: 0,
      },{
        name: '客资收益',
        zhi: '',
        zhuangtai: false,
        state: 0,
      }],
      type_one: 0,
      type_two: 0,
      type_three: 1,
      shaixuan: [{
        name: '全部',
        type: 3
      }, {
        name: '本周',
        type: 1
      }, {
        name: '本月',
        type: 2
      }, {
        name: '当天',
        type: 4
      }],
      loading: true,
    };
  },
  created(){
    getInfo().then(res=>{
      if(res.code==200){
        if(res.user.admin==false){
            this.query.shopid=res.user.shopid;
            this.query.shopType=res.user.shopType;
        }
      
      }
    })
  },
  // 页面初始化挂载dom
  mounted() {
    // setTimeout(() => {
    // this.getLoadEcharts();
    // this.bingzuangtu();
    // }, 200);
    // this.quanxian(['admin'])
    this.shuju()
    this.kezi_list()
    this.shouyi_list()
    this.quanxian = checkRole(['shangjia'])
  },
  methods: {
    japClick(url) {
      if(url == '/business/zhuangxiu'){
        this.$router.push({ path: url,query:this.query })
      }else{
        this.$router.push({ path: url})
      }
    },
    /** 数据统计 */
    async shuju() {
      let res = await shujutongji({ type: this.shaixuan[this.type_one].type });
      if (res.code == 200) {
        var data_data = res.data.data;
        this.tongji_list[0].zhi = data_data.kezi;
        this.tongji_list[1].zhi = data_data.kezi;
        this.tongji_list[2].zhi = data_data.dingdan;
        this.tongji_list[3].zhi = data_data.tuihuikz;
        this.tongji_list[4].zhi = data_data.dingdanshouyi;
        this.tongji_list[5].zhi = data_data.kezishouyi;
      }
    },
    // 客资占比
    async kezi_list() {
      this.loading = true;
      let res = await kezi({ type: this.shaixuan[this.type_two].type });
      if (res.code == 200) {
        this.loading = false;
        var data_data = res.data.data;
        var shuzhi = []
        if (this.quanxian == false) {
          shuzhi = [{
            value: data_data.zizhu,
            name: '自主留资'
          }, {
            value: data_data.houtai,
            name: '后台录入'
          }, {
            value: data_data.shoudong,
            name: '手动留资'
          }, {
            value: data_data.fenxiang,
            name: '分享留资'
          }, {
            value: data_data.yiye,
            name: '异业录入'
          }]
        } else {
          shuzhi = [{
            value: data_data.genjin,
            name: '正在跟进'
          }, {
            value: data_data.chengjiao,
            name: '订单成交'
          }, {
            value: data_data.suodan,
            name: '活动锁单'
          }, {
            value: data_data.fangqi,
            name: '放弃客资'
          }, {
            value: data_data.tuihui,
            name: '退回客资'
          }, {
            value: data_data.quxiao,
            name: '取消订单'
          }]
        }
        this.bingzuangtu(shuzhi)
      }
    },
    /** 收益统计 */
    async shouyi_list() {
      let res = await shouyi({ type: this.shaixuan[this.type_three].type });
      if (res.code == 200) {
        var data_data = res.data.data;
        // console.log('data_data')
        // console.log(data_data)
        this.getLoadEcharts(data_data)
      }
    },
    handleCommand_one(val) {
      this.type_one = val
      this.shuju()
    },
    handleCommand_two(val) {
      this.type_two = val
      this.kezi_list()
    },
    handleCommand_three(val) {
      this.type_three = val
      this.shouyi_list()
    },
    bingzuangtu(zhi) {
      var myChart = this.$echarts.init(
        document.getElementById("bing")
      );
      var options = {
        legend: {
          show: true,
          // orient: 'vertical',
          // x: 'centen',
          y: 'bottom',
          // icon: "circle",
          itemHeight: 10, // 设置高度
          textStyle: {
            color: '#333333' // 图例文字颜色
          },
        },
        series: [{
          type: 'pie',
          radius: ['35%', '60%'],
          center: ['50%', '45%', '20%', '40%'],
          selectedMode: 'single',
          data: zhi,
          label: {
            show: true,
            // position: 'center'
          },
          emphasis: {
            label: {
              // formatter: '{b}: {@score}',
              formatter: '{b}',
              show: true,
              fontSize: '20',
              fontWeight: 'bold',
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          itemStyle: {
            normal: {
              color: function (params) {
                //自定义颜色
                var colorList = [
                  '#EC5555', '#61B9FC', '#F1B619', '#73DC54', '#3A80FC', '#FF8D2E',
                ];
                return colorList[params.dataIndex]
              }
            }
          },
        }]
      }
      myChart.setOption(options);
    },
    getLoadEcharts(data) {
      var myChart = this.$echarts.init(
        document.getElementById("echart")
      );
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['订单成交总额', '取消订单总额', '总收益'],
          show: true,
          // itemHeight: 10, // 设置高度
          // itemGap:1, // 设置间距
          textStyle: {
            color: '#333333' // 图例文字颜色
          },
        },
        grid: {
          top: '10%',
          left: '0%',
          right: '3%',
          bottom: '0%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.Arr1,
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.6)'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['rgba(0,0,0,0.6)'],
              width: 1,
              type: 'solid'
            }
          },
        },
        yAxis: {
          min: 0,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          },
          type: 'value',
          scale: true,
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.5)'
            }
          },
          axisLabel: {
            type: 'value',
            formatter: function (value, index) {
              return value.toFixed(2);
            }
          },
          boundaryGap: [3, '100%'],
          //				        axisLabel:{
          //				        	formatter:'{value}',
          //				        },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['rgba(0,0,0,0.1)'],
              width: 1,
              type: 'solid'
            }
          },
          splitNumber: 8,
          boundaryGap: [0.2, 0.2]
        },
        series: [{
          name: '订单成交总额',
          type: 'line',
          stack: 'Total',
          data: data.chengjiao,
          itemStyle: {
            color: 'rgba(241,182,25,1)'
          },
          label: {
            normal: {
              show: false,
              position: 'top',
              color: '#333333'
            }
          },
          smooth: false,  //是否显示直线
          // areaStyle: {
          //   normal: {
          //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: 'rgba(241,182,25,0.8)'
          //     }, {
          //       offset: 1,
          //       color: 'rgba(241,182,25,0.1)'
          //     }])
          //   }
          // },
        }, {
          name: '取消订单总额',
          type: 'line',
          stack: 'Total',
          data: data.quxiao,
          itemStyle: {
            color: 'rgba(236,85,85,1)'
          },
          label: {
            normal: {
              show: false,
              position: 'top',
              color: '#333333'
            }
          },
          smooth: false,  //是否显示直线
          // areaStyle: {
          //   normal: {
          //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: 'rgba(236,85,85,0.8)'
          //     }, {
          //       offset: 1,
          //       color: 'rgba(236,85,85,0.1)'
          //     }])
          //   }
          // },
        }, {
          name: '总收益',
          type: 'line',
          stack: 'Total',
          data: data.shouyi,
          itemStyle: {
            color: 'rgba(58,128,225,1)'
          },
          label: {
            normal: {
              show: false,
              position: 'top',
              color: '#333333'
            }
          },
          smooth: false,  //是否显示直线
          // areaStyle: {
          //   normal: {
          //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: 'rgba(58,128,225,0.8)'
          //     }, {
          //       offset: 1,
          //       color: 'rgba(58,128,225,0.1)'
          //     }])
          //   }
          // },
        }]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.container {
  width: 300px;
  height: 300px;
  margin-left: 30px;
}

#echart {
  width: 100%;
  height: 500px;
}

#bing {
  width: 100%;
  height: 500px;
}

.kuaisu {
  width: calc(22% - 18px);
  line-height: 50px;
  text-align: center;
  margin-right: 24px;
  color: #FFFFFF;
  background-size: 100% 100%;
  border: 0px !important;
}

.tongji {
  width: calc(25% - 18px);
  margin-right: 24px;
  color: #333333;
}

.tongji:last-child,
.kuaisu:last-child {
  margin-right: 0px;
}

.dropdown {
  float: right;
  margin-right: 24px
}

.title_index {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 24px;
}
</style>
